<template> 
  <h1>个人信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作岗位：{{job.type}}</h2> 
  <h2>工作薪资：{{job.salary}}</h2> 
  <button @click="changeInfo">点我更新个人信息</button>
</template>

<script>  
import {ref} from 'vue'
export default {
  name: 'App',   
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '前端工程师',
      salary: '30K'
    })

    function changeInfo(){
      // name.value = '李四'
      // age.value = 28
      // console.log(name, age)
      console.log(job.value)
      job.value.type = 'UI工程师'
      job.value.salary = '40K'
    } 

    // 返回一个对象 (常用)
    return {
      name,
      age, 
      job,
      changeInfo
    } 
  }
}
</script>

